<template>
	<div>
		<!-- Container 布局容器 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside width="auto">
				<!-- elemnt-ui源码也是把width放在内联样式中 -->
				<common-aside></common-aside>
			</el-aside>
			<el-container>
				<!-- 头部 -->
				<el-header>
					<common-header></common-header>
				</el-header>
				<common-tag></common-tag>
				<el-main>
					<!-- 子路由的出口放这里 -->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue"
import CommonHeader from "@/components/CommonHeader.vue"
import CommonTag from "@/components/CommonTag.vue"

export default {
	data() {
		return {}
	},
	components: {
		CommonAside,
		CommonHeader,
		CommonTag,
	},
}
</script>

<style lang="less" scoped>
.el-aside {
	height: 100vh;
	// position: fixed; /* 相对浏览器窗口固定*/
	// overflow-y: auto; /* 如果内容过多，允许滚动 */
	// z-index: 10; /* 确保侧边栏在其他内容之上 */
}
.el-header {
	padding: 0;
}
</style>
